<template>
  <div class="footer_nav">
    <router-link
      v-for="(item,index) in footer_nav_data"
      :key="index"
      tag="div"
      :to="item.url"
      active-class="on"
    >
      <img :src="item.url === $route.path? item.src_act:item.src" alt />
      <span>{{item.title}}</span>
    </router-link>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("footer_nav", ["footer_nav_data"])
  }
};
</script>

<style lang="scss" scoped>
.footer_nav {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  background: rgb(248, 248, 248);
  width: 100%;
  text-align: center;
  color: rgb(168, 168, 168);
  div {
    flex: 1;
    padding: 0.1rem;
    img {
      width: 0.6rem;
      height: 0.6rem;
      margin: auto;
    }
    span {
      display: block;
      font-size: 0.24rem;
    }
  }
  .on {
    color: #2d8cf0;
  }
}
</style>

